<template>
    <div> 
        <el-row>
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                    <el-input v-model="input" placeholder="姓名" prefix-icon="el-icon-search"></el-input>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-button type="primary" plain>查询</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">   <!-- 表格与网页同宽 -->
            <el-table-column
                prop="name"
                label="姓名"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                prop="age"
                label="年龄"
                align="center"
                width="220"
                class="box">
            </el-table-column>
            <el-table-column
                prop="gender"
                label="性别"
                align="center"
                width="220"
                class="box">
            </el-table-column>
            <el-table-column
                prop="address"
                label="住址"
                align="center"
                width="220"
                class="box">
            </el-table-column>
            <el-table-column
                prop="cureDate"
                label="治愈日期"
                align="center"
                width="220"
                class="box">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.cureDate }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="operate"
                label="操作"
                align="center"
                width="200">
                <template>
                    <el-button size="mini" @click="showCureDialog">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[1, 2, 3]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="2">
        </el-pagination>
        <el-dialog title="详细信息" :visible.sync="dialogFormVisible" width="80%">
            <el-form :model="form" :data="formData">
                <el-row>
                <el-col :span="12">                                
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.detailName"></el-input>
                </el-form-item> 
                </el-col>
                <el-col :span="12">              
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-input v-model="form.detailGender"></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">                                
                <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="form.detailIdCard"></el-input>
                </el-form-item> 
                </el-col>
                <el-col :span="12">              
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="form.detailAge"></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">                                
                <el-form-item label="电话号码" :label-width="formLabelWidth">
                    <el-input v-model="form.detailPhoneNumber"></el-input>
                </el-form-item> 
                </el-col>
                <el-col :span="12">              
                <el-form-item label="住院时间" :label-width="formLabelWidth">
                    <el-input v-model="form.detailDate"></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">                                
                <el-form-item label="治疗医院" :label-width="formLabelWidth">
                    <el-input v-model="form.detailHospital"></el-input>
                </el-form-item> 
                </el-col>
                <el-col :span="12">              
                <el-form-item label="感染来源" :label-width="formLabelWidth">
                    <el-input v-model="form.detailFrom"></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">                                
                <el-form-item label="住址" :label-width="formLabelWidth">
                    <el-input v-model="form.detailAddress"></el-input>
                </el-form-item> 
                </el-col>
                <el-col :span="12">              
                <el-form-item label="出院时间" :label-width="formLabelWidth">
                    <el-input v-model="form.detailOutDate"></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="16">
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.detailDesc" rows="4"></el-input>  
                </el-form-item>
                </el-col>
                </el-row>
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      input: '',
      tableData: null,
      formData:null,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      dialogFormVisible: false,
            form: {
                date: '',
                desc: '',
                detailName:'',
                detailFrom:'',
                detailIdCard:'',
                detailAge:'',
                detailGender:'',
                detailAddress:'',
                detailDate:'',
                detailPhoneNumber:'',
                detailHospital:'',
                detailOutDate:'',
                detailDesc:'',
                },
            formLabelWidth: '130px'
    }   
  },
  created(){
      this.fetchData()
  },
  methods:{
        fetchData(){
          request({
            url: '../cure_list.json',
            method: 'get',   //发请求
          }).then(response => {
            this.tableData = response.data            
          })
        },
        showCureDialog(){
            // 第一步：显示对话框
            this.dialogFormVisible = true
            //第二部：通过axios发送ajax请求，将返回数据
            request({
            url: '../cure_Info.json',
            method: 'get',   //发请求
          }).then( response => {
             this.form = response.data 
             console.log(response.data)           
          })
        },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },     
    }
 }
</script>